body,
html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}
input {
    border-radius: 8px;
    /* 圆角边框 */
    background-color: rgba(44, 164, 245, 0.425);
}

body {
    /* 设置背景图片 */
    /* background-image: url('../image/login_bancakpng.jpeg'); */
    /* 背景图片不重复 */
    background-repeat: no-repeat;
    /* 背景图片覆盖整个元素 */
    background-size: cover;
    /* 如果需要，可以设置背景位置 */
}

.login_box {

    width: 40%;
    /* margin: 18% auto; */
    /* 修正margin值以正确居中 */
    text-align: center;
    /* 让内容居中显示 */
}

.login_box img {
    width: 50%;
    display: block;
    /* 使用block代替float以简化布局 */
    float: left;
}

.login_box p {
    font-size: 25pt;
    font-family: 'SimSun', '宋体', serif;
    /* 设置字体为宋体 */
    margin: 20px 0;
    /* 增加一些垂直间距 */
}

.login_box input {
    width: calc(50% - 20px);
    /* 设定输入框宽度并留一些间距 */
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
    /* 确保padding和border不会改变元素的总宽度 */
    border: none;
}

.login_box span {
    float: left;
    padding-left: 2%;
}



.login_box {
    background-color: rgba(205, 222, 238, 0.616);
    /* 背景图片不重复 */
    border-radius: 8px;
    /* 圆角边框 */
}

#login {
    background-color: rgb(24, 136, 240);
    font-size: 15pt;
    font-family: 'SimSun', '宋体', serif;
}


.content {
    flex: 1;
    /* 占据剩余空间 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_footer {
    /* 移除任何可能导致页脚被隐藏的样式 */
    text-align: center;
    padding: 5px 0;
    background-color: rgba(255, 255, 255, 0.329);
    /* 可选，增加背景色以便看到页脚 */
}

/* 自适应多端 */
@media (max-width: 1000px) {
    .login_box {
        width: 90%;
        /* 稍微减小宽度以适应小屏幕 */
    }

    .login_box img {
        width: 100%;
        /* 图片宽度占满容器 */
        margin-bottom: 20px;
        /* 增加图片与下方内容的间距 */
    }

    .login_box p {
        font-size: 20pt;
        /* 减小字体大小以适应小屏幕 */
        display: block;
        /* 让p和span元素独占一行 */
        text-align: center;
        /* 文本左对齐，如果需要的话 */
        margin: 10px 0;
        /* 调整垂直间距 */
    }

    .login_box span {
        font-size: 10pt;
        /* 减小字体大小以适应小屏幕 */
        display: block;
        /* 让p和span元素独占一行 */
        text-align: left;
        /* 文本左对齐，如果需要的话 */
        margin: 10px 0;
        /* 调整垂直间距 */
    }

    .login_box input {
        width: calc(100% - 20px);
        /* 在小屏幕上，输入框宽度占满可用空间 */
        display: block;
        /* 输入框独占一行 */
        margin: 10px auto;
        /* 水平和垂直居中输入框（可选） */
    }

    /* 隐藏或重新布局“忘记密码”span，如果需要的话 */
    .login_box span:last-child {
        display: block;
        /* 让“忘记密码”独占一行 */
        text-align: right;
        /* 文本右对齐，如果需要的话 */
        margin-top: -10px;
        /* 调整与登录按钮的间距，如果需要的话 */
    }
}